﻿/*Basic reset*/



div {
    display: block;
}

.container {
    width: 100%;
}

#content {
    float: left;
    margin-left: 320px;
}

#accordian {
    float: left;
    position: fixed;
    left: 0px;
    top: 50px;
    bottom: 0px;
    background: #004050;
    width: 280px;
    min-width: 280px;
    /* min-height: 600px;*/
    /*max-height: 600px;*/
    color: white;
    /*Some cool shadow and glow effect*/
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);
}
    /*heading styles*/
    #accordian h3 {
        color: white;
        font-size: 12px;
        line-height: 34px;
        padding: 0 10px;
        cursor: pointer;
        /*fallback for browsers not supporting gradients*/
        background: #003040;
        background: linear-gradient(#003040, #002535);
    }
        /*heading hover effect*/
        #accordian h3:hover {
            text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
        }
        /*iconfont styles*/
        #accordian h3 span {
            font-size: 16px;
            margin-right: 10px;
        }
    /*list items*/
    #accordian li {
        list-style-type: none;
    }
    /*links*/
    #accordian ul ul li a {
        color: white;
        text-decoration: none;
        font-size: 11px;
        line-height: 27px;
        display: block;
        padding: 0 15px;
        /*transition for smooth hover animation*/
        transition: all 0.15s;
    }
        /*hover effect on links*/
        #accordian ul ul li a:hover {
            background: #003545;
            border-left: 5px solid lightgreen;
        }
    /*Lets hide the non active LIs by default*/
    #accordian ul ul {
        display: none;
    }

    #accordian li.active ul {
        display: block;
    }
